<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-17 15:04:17
 * @LastEditTime: 2021-07-28 20:22:17
 * @Description: 巡视移动作业任务列表页
-->
<template>
	<article class="bg_4dbfae tourIndex">
		<!-- 头组件 -->
        <van-nav-bar title="巡视列表" @click-left="back"  left-arrow fixed>
            <!-- <template slot="right">
				<div class="parent-circle" @click="loginOutApp">
					<div class="child-circle"></div>
				</div>
            </template> -->
		</van-nav-bar>
		<!-- 搜索区域 -->
		<van-row  class="bg_4dbfae header search_header" type="flex" justify='space-around' fixed>
            <van-col span="16">
                <van-search v-model.trim="taskName" clearable @input="focus" shape="round" background="#F5F6FA" placeholder="请搜索巡视任务">
				</van-search>
			</van-col>
            <van-col span="2" class="center_center">
				<div class="radis-border" style="margin-right: 80%;">
					<van-image class="imgSize" width="28" height="28" @click="rfidBtn" :src="icon.rfid" />
				</div>
            </van-col>
			<van-col span="2" class="center_center">
				<div class="radis-border" style="margin-right: 42%;">
					<van-image class="imgSize" width="28" height="28" @click="scanBtn" :src="icon.scan" />
				</div>
			</van-col>
			<van-col span="2" class="center_center">
				<div class="radis-border">
					<van-image class="imgSize" width="24" height="24"   @click="addBtn" :src="icon.add" />
				</div>
            </van-col>
		</van-row>
		
		<van-row class="bg_4dbfae header" type="flex" justify='space-around' style="padding: 0px 10px;">
            <van-col span="20" style="color: #666;font-size: 16px;line-height: 40px;">
				<van-image :class="{arrowUp:!arrowUp}" @click="sortTask" width="14" height="14" :src="icon.up" />
               创建时间
			</van-col>
			<van-col span="4" style="padding-top: 10px;
			text-align: right;" @click="btnShow = !btnShow">
					<van-image class="imgSize" width="20" height="20"  :src="icon.filter" />
			</van-col>
		</van-row>


		<!-- 按钮区域 -->
		<van-row class="button_tab" v-show="btnShow">
			<van-button style="width:20%; height: 32px;" round v-for="(button,index) in buttonText" :key="index" type="default" :class="{active:button.active}" size="mini" @click="taskTaskChange(button)" >{{button.text}}</van-button>
		</van-row>


		<!-- 列表区域 -->
		<div class="doc-wrapper taskList">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list
				  offset="0"
				  v-model="loading"
				  :finished="finished"
				  finished-text="没有更多了"
				  @load="onLoad"
				>
					<van-row v-for="(item,index) in tourList" @click="operateBtn(item)" :key="index" style="position：relative">
						<van-col span="3" class="flex-c">
							<van-image class="imgSize" width="34" height="34"  :src="icon.filetour" />
						</van-col>
						<van-col span="17" class="doc-wrapper__content">
							<div class="line_div">{{item.name}}</div>
							<div style="font-size: 10px;">
								<p  class="color-b8">
									<span class="mr10">工作班组:</span>
									<span>{{item.patrolTeamName}}</span>
								</p>
							</div>
							<div style="font-size: 10px;">
								<p  class="color-b8">
									<span class="mr10">要求完成时间:</span>
									<span>{{item.requireFinishTime | formatTime}}</span>
								</p>
							</div>
						</van-col>
						<van-col span="4" class="flex-c" style="top: -24px;right: -2%;"> 
							<van-button class="btnStyle" color="#3DB4A1" size="small" v-if="item.startState == '2'" type="primary" @click="operateBtn(item)">已执行</van-button>
							<van-button size="mini" class="btnStyle"  v-if="item.startState == '1'" type="primary" color="#F9942D" @click="operateBtn(item)">执行中</van-button>
							<van-button size="mini" class="btnStyle" color="#FA5151" v-if="item.startState == '0'" type="primary"  @click="operateBtn(item)">未执行</van-button>
						</van-col>
						<van-col span="4" class="flex-c"  style="top: 20px;right: -2%;"> 
							<van-button icon="edit" :disabled="item.startState!=0" color="#3DB4A1" size="small" round type="primary" @click.stop="editTask(item)">编辑</van-button>
						</van-col>
					</van-row>
				</van-list>
			</van-pull-refresh>
		</div>
	</article>
</template>

<script type="text/javascript">
	import { Tabbar} from 'vant';
	import Util from "@/utils/util" 
	import {mapGetters} from 'vuex'
	import {queryTourTaskList} from '../../api/tourTask';
	export default {
		name: 'DefectManage',
		data() {
			return {
				// 变电站数据
				taskName:"",
				finished:false,
				loading:false,
				refreshing: false,
				flag: false,
				pageNum: 0,
				pageSize: 5,
				arrowUp: false,//图片上  升序   图片下 降序
				// 按钮数据
				buttonText:[{text:"全部",status:"",active:true},{text:"待执行",status:"0",active:false},{text:"执行中",status:"1",active:false},{text:"已执行",status:"2",active:false}],
				taskStatus: "",//任务状态
				seldeviceList: [],//巡视设备
				// 巡视任务列表
				tourList:[],
				icon: {
					filetour:require('../../../../assets/img/mainIndex/filetour.png'),
					rfid:require('../../../../assets/img/mainIndex/rfid.png'),
					scan:require('../../../../assets/img/mainIndex/scan.png'),
					add:require('../../../../assets/img/mainIndex/add.png'),
					up:require('../../../../assets/img/mainIndex/up.png'),
					filter:require('../../../../assets/img/mainIndex/filter.png')
				},
				userInfo:{},
				btnShow: true,
			}
		},
		
		computed: {
			...mapGetters(["subId","subName"]),
		},
		
		methods: {
			//任务按照时间排序
			sortTask() {
				this.arrowUp = !this.arrowUp;
				if(this.arrowUp) {//降序
					this.tourList = this.sortKeyDown(this.tourList,"createTime")
				}else{//升序
					this.tourList = this.sortKeyUp(this.tourList,"createTime")
				}
				
			},
			//时间升序排序
			sortKeyUp(dataList,name) {
				console.log("dataList=====",dataList)
				return dataList.sort(function(a,b){
					var x= a[name];
					var y= b[name];
					return x>y ? -1 : x<y ? 1 :0;
				})
			},
			//时间降序排序
			sortKeyDown(dataList,name) {
				console.log("dataList==8888==",dataList)
				return dataList.sort(function(a,b){
					var x= b[name];
					var y= a[name];
					return x>y ? -1 : x<y ? 1 :0;
				})
			},
			/**
			* @description: 获取焦点
			*/
			focus(){
				this.pageNum = 1;
				this.tourList = [];
				this.queryTourTaskListBtn();
			},
			/**
			* @description: 扫描RFID
			*/
			rfidBtn(){

			},
			/**
			* @description: 扫描二维码
			*/
			scanBtn(){
				
			},
			/**
			* @description: 新建巡视任务
			*/
			addBtn(){
				this.$router.push({
					path: '/addTask',
					query: {
						title: '新建巡视任务'
					}
				})
			},
			/**
			* @description: 开始操作按钮
			*/
			operateBtn(item){
				var status = item.startState;
				this.dealDevice(item);
				if(status == 2){//已执行
					this.$router.push({
						name: 'TourTaskDetail',
						params: {
							taskInfo: item,
						}
					})
				}else if(status == 1) {//执行中
					if(item.patrolTypeName == "全面巡视") {
						this.$router.push({
							name: 'executeIndex',
							params: {
								taskInfo: item,
								deviceList: this.seldeviceList//巡视设备
							}
						})
					}else{
						this.$router.push({
							name: 'finish',
							params: {
								taskInfo: item,
								deviceList: this.seldeviceList//巡视设备
							}
						})
					}
					
				}else{//未执行
					this.$router.push({
						name: 'beginIndex',
						params: {
							taskInfo: item,
							deviceList: this.seldeviceList//巡视设备
						}
					})
				}
			},
			/**
			* @description: 退出系统
			*/
			loginOutApp(){
				
			},
			back() {
				this.$router.push({
					name: "MainHome",
					params:{}
				});
			},
			/**
			* @description: 跳转编辑任务页面
			*/
			editTask(item) {
				this.$router.push({
					name: 'addTask',
					params: {
						taskInfo: item
					}
				})
			},
			/**
			* @description: 任务状态切换
			* @param {*}
			* @return {*}
			*/
			taskTaskChange(button) {
				this.buttonText.map(item=>{
					item.active=false;
				})
				button.active = true;
				this.taskStatus = button.status;//任务状态
				this.pageNum = 1;
				this.tourList = [];
				this.queryTourTaskListBtn();
			},
			/**
			* @description: 查询巡视任务列表
			*/
			queryTourTaskListBtn(){
				var self = this;
				if(this.flag) {
					return;
				}
				this.flag = true;
				this.$toast.loading({
					duration: 0,//展示时长 0不会消失
					message: "正在获取...",
					forbidClick: true,//是否禁止背景点击
					overlay: true//是否显示背景遮罩层
				})
				var params = {
					substationId:this.subId,// 变电站id 否
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orgId: this.userInfo.orgId,//班组id
					userId:this.userInfo.userId, // 用户id 否
					roleCode:"",// 角色code 否
					sort: this.arrowUp? "ASC" : "DESC",// ASC升序 DESC降序
					startState: this.taskStatus,//任务状态
				}
				if(this.taskName) {
					params.name = this.taskName;//任务名称
				}
				queryTourTaskList(params).then(function(res) {
					self.flag = false;
					self.$Toast.clear()
					if(self.refreshing){
						self.refreshing = false
					}
					self.pageNum = res.pageInfo.pageNum;//当前页数
					console.log("res.pageInfo.pageNum",res.pageInfo.pageNum)
					if(self.pageNum == res.pageInfo.pages || res.pageInfo.pages == 0) {
						self.finished = true
					}else{
						self.finished = false
					}
					self.loading = false;//加载完成
					if(res.success){
						self.tourList.push(...res.data);
					}else{
						self.tourList = [];
						self.$Toast.fail(res.msg)
					}
				}).catch(err => {
					self.flag = false;
					self.tourList = [];
					self.finished = true
               		self.loading = false;//加载完成
					self.$toast.clear()
					self.$Toast.fail(err)
				});
			},
			/**
			* @description: 列表下拉刷新
			* @param {*}
			* @return {*}
			*/
			onRefresh() {
				//清空列表数据
				this.finished = false;
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.pageNum = 1;
				this.tourList = [];
				this.queryTourTaskListBtn();
			},
			/**
			* @description: 上拉加载更多数据
			* @param {*}
			* @return {*}
			*/
			onLoad() {
				console.log("=====")
				this.pageNum++;
				this.queryTourTaskListBtn();
			},
			/**
			* @description: 处理设备格式(将相同的间隔设备归纳一起) 间隔-设备
			* @param {*}
			* @return {*}
			*/
			dealDevice(taskInfo) {
				this.seldeviceList = [];
				if(taskInfo.deviceList && taskInfo.deviceList.length > 0) {
					var obj = [];
					for(var i in taskInfo.deviceList) {
						if(obj.indexOf(taskInfo.deviceList[i].bayId) === -1) {
							this.seldeviceList.push({
								bayName: taskInfo.deviceList[i].bayName,
								bayId: taskInfo.deviceList[i].bayId,
								deviceList:[taskInfo.deviceList[i]]
							})
							obj.push(taskInfo.deviceList[i].bayId);
						}else{
							for(var j in this.seldeviceList) {
								if(this.seldeviceList[j].bayId == taskInfo.deviceList[i].bayId) {
									this.seldeviceList[j].deviceList.push(taskInfo.deviceList[i]);
									break;
								}
							}
						}
					}
				}
				console.log("this.seldeviceList",this.seldeviceList)
			}
		},
		filters: {
			formatTime(value) {
				if(value){
					return Util.DateUtil.getFormatDateByLong(value,'yyyy-MM-dd hh:mm')
				}
				return ""
			}
		},
		mounted() {
				
		},
		
		created() {
			var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
			console.log("this.subId",this.subId)
		},
		
	}
</script>

<style scoped>
	article {
		height: 100vh;
		font-family: 微软雅黑;
		overflow-y: scroll;
	}
	.bg_4dbfae{
		background: #FFFFFF;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
    }
	.header .van-cell {
		font-size: 0.3rem;
		justify-content: center;
		align-items: center;
    }
	.van-search__content--round {
      background: #F5F6FA !important;
	  color: #E6E6E6 !important;
    }
	.tc-keyword-wrapper {
		margin: 5px 0;
	}
	.van-button--default {
		color: #C4C5CD !important;
		background-color: #F5F6FA !important;
		border: 0.02667rem solid #ebedf0;
		margin-right: 10px;
		width: 5.625rem;
   }
	
	.defectList-wrapper {
		flex: 1 1 0%;
		overflow-y: scroll;
		background: white;
	}
	.van-tabbar--fixed {
		position: fixed;top: 62px;left: 0;background: #f5f6fa !important;
    }
	.dot {
		display: inline-block;height: 4px;width: 4px;border-radius: 50%;background-color: #CCCCCC;
	}
	.doc-wrapper{
		overflow-y: auto;
		height: calc(100% - 212px);
		background: white;border-radius: 10px;padding: 15px 10px;
	}
	.van-button--primary {
		background-color: #17B49B;border: 0.02667rem solid #17B49B;width: 3.8rem;height: 1.7rem;box-sizing: border-box;
    }
	.flex-c{
		position: relative;
	}
	.van-tabbar-item__icon img {
		display: block;height: 1rem;margin-bottom: 5px;
    }
	[class*=van-hairline]::after{
		border: none !important;
	}
	.active{
		color: #36BDA6 !important;background: #ECF6F4 !important;
	}
	.van-nav-bar__text,.van-nav-bar .van-icon{
		color: #333333;
	}
	.tourIndex /deep/ .van-nav-bar__content{
		background: rgb(23, 180, 155) !important;color: white;
	}
	.tourIndex  .taskList  .van-row{
		background-color: #f5f9f8;border-radius: 5px;
		margin-bottom: 20px;
		padding: 20px;box-sizing: border-box;
	}
	.tourIndex .line_div{
		word-break: break-all;
		color: rgb(51, 51, 51);
		font-size: 1rem;
		border-bottom: 1px solid #e6e7e7;
		width: 12rem;
		padding-bottom: 0.2rem;
	}
	.van-search__content--round {
      background: white !important;
	  color: #E6E6E6 !important;
    }
	.button_tab{
		padding: 5px 15px;
		text-align: center;
	}
	.color-b8{
		flex: 5;color: #9d9d9d;
	}
	.tourIndex /deep/ .van-search__action{
		position: relative;right: 35px;
	}
	.search_header{
		background: #F5F6FA;margin-top: 45px;
	}
	.arrowUp{
		transform: rotate(180deg);
	}
	.btnStyle{
		border-radius: 0px 10px 0px 10px;
	}
</style>
